<template>
  <div class="app-container">
    <el-tabs v-model="activeName" style="padding-left:30px">
      <!-- 经营许可 -->
      <el-tab-pane label="经营许可" name="first">
        <div class="divBar" />
        <h5 class="titleInfo">企业/个人工商户信息</h5>

        <div class="title">
          <el-radio-group v-model="enp_type" disabled>
            <el-radio :label="2">企业</el-radio>
            <el-radio :label="1">个人工商户信息</el-radio>
          </el-radio-group>
        </div>
        <el-form
          v-if="flag"
          ref="form"
          class="form"
          :rules="rules"
          :model="form"
          label-width="180px"
          disabled
        >
          <el-form-item label="营业执照类型" prop="enp_code_type">
            <el-radio-group v-model="form.enp_code_type">
              <el-radio :label="1">营业执照注册号</el-radio>
              <el-radio :label="2">统一社会信用代码</el-radio>
            </el-radio-group>
            <el-input v-model="form.enp_code" placeholder="请输入15、18位字母或数字" />
          </el-form-item>

          <el-form-item label="企业名称" prop="enp_title">
            <el-input v-model="form.enp_title" />
          </el-form-item>

          <el-form-item label="法定代表人" prop="enp_user">
            <el-input v-model="form.enp_user" @blur="IdCard" />
          </el-form-item>

          <el-form-item label="营业执照截止时间" prop="enp_time_type">
            <el-radio-group v-model="form.enp_time_type">
              <el-radio :label="1">长期</el-radio>
              <el-radio :label="2">时间</el-radio>
            </el-radio-group>
            <el-date-picker
              v-if="form.enp_time_type == 2"
              v-model="form.enp_lose_time"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="请选择日期"
            />
          </el-form-item>

          <el-form-item label="营业执照照片" prop="enp_img">
            <newUpload
              ref="uploadImg1"
              :file-num="3"
              :file-list="fileList1"
              :size-number="4"
              disabled
            />
            <b class="text">
              1.请上传清晰、完整、无遮挡物的营业执照图片
              <br />2.要求原件红章清晰，如为复印件需加盖公司公章
              <br />3.图片大小不能超过4M，图片格式为jpg、jpeg、png
            </b>
          </el-form-item>

          <el-form-item label="法人证件类型" prop="user_type">
            <el-select v-model="form.user_type" placeholder="请选择" @change="IdCard">
              <el-option
                v-for="item in cardOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="法人证件号" prop="user_number">
            <el-input v-model="form.user_number" @blur="IdCard" />
          </el-form-item>

          <el-form-item label="法人证件照正面" prop="user_front_img">
            <newUpload ref="uploadImg2" :file-num="1" :file-list="fileList2" :size-number="2" />
            <p>上传证件正面</p>
          </el-form-item>
          <el-form-item label="证件照背面" prop="user_verso_img">
            <newUpload ref="uploadImg3" :file-num="1" :file-list="fileList3" :size-number="2" />
            <p class="msgText">上传证件背面</p>
          </el-form-item>
          <div class="divBar" />
          <h5 class="titleInfo">银行卡信息</h5>

          <el-form-item label="开户名" prop="bank_user">
            <el-input v-model="form.bank_user" @blur="bankCard" />
          </el-form-item>
          <el-form-item label="开户行" prop="bank_name">
            <el-input v-model="form.bank_name" />
          </el-form-item>
          <el-form-item label="开户账号" prop="bank_num">
            <el-input v-model="form.bank_num" @blur="bankCard" />
          </el-form-item>
        </el-form>
        <el-form
          v-else
          ref="form"
          class="form"
          :rules="rules"
          :model="form"
          label-width="180px"
          disabled
        >
          <el-form-item label="营业执照类型" prop="enp_code_type">
            <el-radio-group v-model="form.enp_code_type">
              <el-radio :label="1">营业执照注册号</el-radio>
              <el-radio :label="2">统一社会信用代码</el-radio>
            </el-radio-group>
            <el-input v-model="form.enp_code" placeholder="请输入15、18位字母或数字" />
          </el-form-item>

          <el-form-item label="经营者" prop="enp_user">
            <el-input v-model="form.enp_user" placeholder="请输入经营者姓名" @blur="IdCard" />
          </el-form-item>

          <el-form-item label="企业名称" prop="enp_title">
            <el-input v-model="form.enp_title" placeholder="请输入营业执照名称" />
          </el-form-item>

          <el-form-item label="营业执照照片" prop="enp_img">
            <newUpload
              ref="uploadImg1"
              :file-num="3"
              :file-list="fileList1"
              :size-number="4"
              disabled
            />
            <b class="text">
              1.请上传清晰、完整、无遮挡物的营业执照图片
              <br />2.要求原件红章清晰，如为复印件需加盖公司公章
              <br />3.图片大小不能超过4M，图片格式为jpg、jpeg、png
            </b>
          </el-form-item>

          <el-form-item label="证件类型" prop="user_type">
            <el-select v-model="form.user_type" placeholder="请选择" @change="IdCard">
              <el-option
                v-for="item in cardOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="证件号" prop="user_number">
            <el-input v-model="form.user_number" @blur="IdCard" />
          </el-form-item>

          <el-form-item label="证件照片正面" prop="user_front_img">
            <newUpload ref="uploadImg2" :file-num="1" :file-list="fileList2" :size-number="2" />
            <p class="msgText">上传证件正面</p>
          </el-form-item>

          <el-form-item label="证件照片反面" prop="user_verso_img">
            <newUpload ref="uploadImg3" :file-num="1" :file-list="fileList3" :size-number="2" />
            <p class="msgText">上传证件背面</p>
          </el-form-item>

          <div class="divBar" />
          <h5 class="titleInfo">银行卡信息</h5>

          <el-form-item label="开户名" prop="bank_user">
            <el-input v-model="form.bank_user" @blur="bankCard" />
          </el-form-item>
          <el-form-item label="开户行" prop="bank_name">
            <el-input v-model="form.bank_name" />
          </el-form-item>
          <el-form-item label="开户账号" prop="bank_num">
            <el-input v-model="form.bank_num" @blur="bankCard" />
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 基本资料 -->
      <el-tab-pane label="基本资料" name="second">
        <div class="divBar" />

        <h5 class="titleInfo">基础信息</h5>
        <el-form
          ref="form4"
          class="form"
          :rules="rules4"
          :model="form4"
          label-width="150px"
          disabled
        >
          <el-row>
            <el-col :span="9">
              <el-form-item label="姓名" prop="legal_person">
                <el-input v-model="form4.legal_person" />
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="推荐人手机号" prop="recomend_phone">
                <el-input v-model="form4.recomend_phone" />
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="form4.phone" />
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="推荐人姓名" prop="recomend_user">
                <el-input v-model="form4.recomend_user" />
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="form4.email" />
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="签约分公司" prop="company_name">
                <el-input v-model="form4.company_name" />
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="证件类型" prop="identity_type">
                <el-select v-model="form4.identity_type" placeholder="请选择">
                  <el-option
                    v-for="item in cardOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="15">
              <el-form-item label="签约身份" prop="level">
                <el-radio-group v-model="form4.level">
                  <el-radio :label="2">特约授权经销商</el-radio>
                  <el-radio :label="3">高级授权经销商</el-radio>
                  <el-radio :label="7">普通合伙人授权经销商</el-radio>
                  <el-radio :label="8">高级合伙人授权经销商</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span="9">
              <el-form-item label="证件号" prop="identity">
                <el-input v-model="form4.identity" @blur="IdCard1" />
              </el-form-item>
            </el-col>

            <el-col :span="15">
              <el-form-item label="常驻地址" prop="daily_address">
                <el-cascader v-model="form4.daily_address" :options="twoOptions" />
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="证件照片正面" prop="identity_img">
                <newUpload ref="uploadImg4" :file-num="1" :file-list="fileList4" :size-number="2" />
                <p class="msgText">上传证件正面</p>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="收货地址" prop="goods_address">
                <el-input v-model="form4.goods_address" type="textarea" :rows="3" />
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="证件照片反面" prop="identity_back_img">
                <newUpload ref="uploadImg5" :file-num="1" :file-list="fileList5" :size-number="2" />
                <p class="msgText">上传证件背面</p>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div class="divBar" />
        <h5 class="titleInfo">门店信息</h5>
        <el-form ref="form1" class="form" :rules="rules1" :model="form1" label-width="150px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="门店名称" prop="name">
                <el-input v-model="form1.name" :rows="1" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="门店分类" prop="cate_id">
            <!-- <el-cascader v-model="form1.cate_name" :options="shopCate"  /> -->
            <el-select v-model="form1.cate_id" placeholder="请选择">
              <el-option
                v-for="item in shopCate"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="主营业务" prop="main_business">
            <el-cascader
              v-model="form1.main_business"
              :options="businessCate"
              :show-all-levels="false"
              @change="changeTabe"
            />
          </el-form-item>
          <el-row>
            <el-col :span="8">
              <el-form-item label="门店详细地址" prop="address">
                <el-cascader v-model="selectedOptions" :options="options" @change="pcaList" />
                <el-input
                  v-model="form1.address"
                  type="textarea"
                  :rows="2"
                  style="margin:20px 0"
                  @blur="getLngLat"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <div v-show="isShow" id="container" />
          <el-form-item label="营业电话" prop="business_phone_one">
            <el-input v-model="form1.business_phone_one" />
          </el-form-item>

          <el-form-item label="营业电话2" prop="business_phone_two">
            <el-input v-model="form1.business_phone_two" />
          </el-form-item>
          <el-row>
            <el-col :span="16">
              <el-form-item label="营业时间" prop="business_time">
                <el-time-picker
                  v-model="form1.business_time"
                  is-range
                  value-format="HH:mm"
                  align="center"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="门店公告" prop="desc">
                <el-input
                  v-model="form1.desc"
                  type="textarea"
                  :rows="5"
                  maxlength="200"
                  placeholder="门店公告内容不得小于10字且最多输入200字，门店公告会在门店中展现！"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>

      <!-- 门店环境 -->
      <el-tab-pane label="门店环境" name="third">
        <!-- <shopPic /> -->
        <div class="divBar" />
        <h5 class="titleInfo" />

        <el-form ref="form2" class="form" :model="form2" :rules="rules2" label-width="150px">
          <el-row>
            <el-form-item label="门店头像" prop="shop_logo">
              <newUpload ref="uploadImg6" :fileNum="1" :file-list="fileList6" :size-number="2" />
              <!-- <p class="msgText">* 文件格式JPG、JPEG、PNG文件大小80K以内，建议尺寸80PX*80PX</p> -->
            </el-form-item>

            <el-form-item label="门店环境" prop="image_ids">
              <newUpload ref="uploadImg7" :fileNum="12" :file-list="fileList7" :size-number="2" />
            </el-form-item>

            <!-- <el-form-item label="作品集" prop="works_ids">
                            <newUpload
                                ref="uploadImg8"
                                :fileNum="20"
                                :file-list="fileList8"
                                :size-number="2"
                            />
            </el-form-item>-->
          </el-row>
        </el-form>
      </el-tab-pane>
      <!-- 特色服务 -->
      <el-tab-pane label="特色服务" name="fourth">
        <!-- <shopTese /> -->
        <div class="divBar" />
        <h5 class="titleInfo">特色服务</h5>
        <el-form ref="form3" class="form" :model="form3" :rules="rules3" label-width="180px">
          <el-row>
            <el-col :span="13">
              <el-form-item label="环境设施（最多选3种）" prop="envir">
                <el-checkbox-group v-model="form3.envir" :min="1" :max="3">
                  <el-checkbox
                    v-for=" city in cities"
                    :key="city.id"
                    :label="city.id"
                  >{{ city.name }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>

            <el-col :span="13">
              <el-form-item label="特色服务（最多选3种）" prop="char">
                <el-checkbox-group v-model="form3.char" :min="1" :max="3">
                  <el-checkbox
                    v-for=" server in servers"
                    :key="server.id"
                    :label="server.id"
                  >{{ server.name }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>

            <el-col :span="13">
              <el-form-item label="个性服务（最多选3种）" prop="per">
                <el-checkbox-group v-model="form3.per" :min="1" :max="3">
                  <el-checkbox
                    v-for=" personaly in personalies"
                    :key="personaly.id"
                    :label="personaly.id"
                  >{{ personaly.name}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <!-- 商户标签 -->
            <el-col :span="13">
              <el-form-item label="商户标签（最多选3种）" prop="mer">
                <el-checkbox-group v-model="form3.mer" :min="0" :max="3">
                  <el-checkbox
                    v-for=" Merchants in MerchantList"
                    :key="Merchants.id"
                    :label="Merchants.id"
                  >{{ Merchants.name}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button
              style="margin:30px 0"
              type="primary"
              @click="submitCheck('form1','form2','form3')"
            >保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import newUpload from "@/components/imgUpload/shopImgUp";
import axios from "axios";

import {
  getPro,
  getCate,
  getLat,
  getChar,
  getCharSer,
  picData,
  getShopData,
  editShop,
} from "@/api/shopMange";

export default {
  name: "shopEdit",
  components: { newUpload },
  data() {
    var shopLogo = (rule, value, callback) => {
      if (!this.form2.shop_logo) {
        callback(new Error("请上传门店头像"));
      } else {
        callback();
      }
    };
    var imageIds = (rule, value, callback) => {
      if (!this.form2.image_ids) {
        callback(new Error("请上传门店环境"));
      } else {
        callback();
      }
    };
    // 电话号验证
    var validateNum = (rule, value, callback) => {
      const number = /^((0\d{2,3}\d{7,8})|(1[3456789]\d{9}))$/;
      // const phoneNumber = /^0?1[3|4|5|8][0-9]\d{8}$/
      if (!value) {
        callback(new Error("请输入电话号码"));
      } else if (!number.test(value)) {
        callback(new Error("请输入正确电话号码"));
      } else {
        callback();
      }
    };
    var phoneReg = (rule, value, callback) => {
      const number = /^(1[3456789]\d{9})$/;
      // const phoneNumber = /^0?1[3|4|5|8][0-9]\d{8}$/
      if (!value) {
        callback(new Error("请输入电话号码"));
      } else if (!number.test(value)) {
        callback(new Error("请输入正确电话号码"));
      } else {
        callback();
      }
    };
    // 身份证号验证
    var validateIdentity = (rule, value, callback) => {
      const isIDCard = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
      if (!value) {
        callback(new Error("请输入证件号"));
      } else if (this.form.user_type == 0 && !isIDCard.test(value)) {
        callback(new Error("请输入正确证件号"));
      } else {
        callback();
      }
    };
    var validateIdentity1 = (rule, value, callback) => {
      const isIDCard = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
      if (!value) {
        callback(new Error("请输入证件号"));
      } else if (this.form.user_type == 4 && !isIDCard.test(value)) {
        callback(new Error("请输入正确证件号"));
      } else if (this.form.user_type == 4 && !this.enpMsg) {
        callback(new Error("姓名与身份证件不一致，请重新输入"));
      } else {
        callback();
      }
    };
    var validateIdentity2 = (rule, value, callback) => {
      const isIDCard = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
      if (!value) {
        callback(new Error("请输入证件号"));
      } else if (this.form4.identity_type == 4 && !isIDCard.test(value)) {
        callback(new Error("请输入正确证件号"));
      } else if (this.form4.identity_type == 4 && !this.enpMsg1) {
        callback(new Error("姓名与身份证件不一致，请重新输入"));
      } else {
        callback();
      }
    };
    var validateBusType = (rule, value, callback) => {
      const Card = /(^(?:(?![IOZSV])[\dA-Z]){2}\d{6}(?:(?![IOZSV])[\dA-Z]){10}$)|(^\d{15}$)/;
      if (!value) {
        callback(new Error("请选择营业执照类型"));
      } else if (!this.form.enp_code) {
        callback(new Error("请输入营业执照号或统一社会信用代码"));
      } else if (!Card.test(this.form.enp_code)) {
        callback(new Error("请输入正确的营业执照号或统一社会信用代码"));
      } else {
        callback();
      }
    };
    var provinceId = (rule, value, callback) => {
      if (!this.form1.province) {
        callback(new Error("请选择省市区"));
      } else if (this.form1.address == "") {
        callback(new Error("请输入详细地址"));
      } else {
        callback();
      }
    };
    var bankNnum = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入开户账号"));
      } else if (!this.banknum) {
        callback(new Error("开户名与开户账号信息不一致，请重新输入"));
      } else {
        callback();
      }
    };
    var enpLose = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请选择营业执照截止时间类型"));
      } else if (value == 2 && !this.form.enp_lose_time) {
        callback(new Error("请选择营业执照截止时间"));
      } else {
        callback();
      }
    };
    return {
      enpMsg: false,
      enpMsg1: false,
      check_msg: "",
      flag: true,
      // offensive: "",
      dialogVisible: true,
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      fileList5: [],
      activeName: "first",
      btnDisable: true,
      enp_type: 2,
      form: {
        user_type: "",
        enp_title: "",
        enp_code_type: 0,
        bank_num: "",
        bank_name: "",
        bank_user: "",
        enp_user: "",
        enp_time_type: "",
        enp_lose_time: "",
        user_number: "",
        enp_img: [],
        user_front_img: "",
        user_verso_img: "",
      },
      form1: {
        cate_id: "",
        name: "",
        address: "",
        business_phone_one: "",
        business_phone_two: "",
        business_time: [],
        main_business_id: "",
        main_business: [],
        lng: "",
        lat: "",
      },
      form3: {
        envir: [],
        char: [],
        per: [],
        mer: [],
      },
      fileList6: [],
      fileList7: [],
      // fileList8: [],
      form2: {
        shop_logo: "",
        image_ids: [],
        // works_ids: []
      },
      rules2: {
        shop_logo: [{ required: true, validator: shopLogo, trigger: "blur" }],
        image_ids: [{ required: true, validator: imageIds, trigger: "blur" }],
      },
      cities: [], // 特色服务选项
      servers: [],
      personalies: [],
      MerchantList: [], //商户标签
      rules3: {
        envir: [{ required: true, message: "请选择环境设施" }],
        char: [{ required: true, message: "请选择特色服务" }],
        per: [{ required: true, message: "请选择个性分类" }],
      },
      form4: {
        legal_person: "",
        email: "",
        phone: "",
        recomend_user: "",
        recomend_phone: "",
        level: 1,
        company_name: "",
        daily_address: [],
        goods_address: "",
        identity_img: "",
        identity_back_img: "",
        identity_type: "",
        identity: "",
      },
      address: "",

      cardOption: [
        {
          value: 1,
          label: "港澳来往大陆通行证",
        },
        {
          value: 2,
          label: "台湾来往大陆通行证",
        },
        {
          value: 3,
          label: "护照",
        },
        {
          value: 4,
          label: "身份证",
        },
      ],
      options: [],
      shopCate: [],
      businessCate: [],
      twoOptions: [],
      selectedOptions: [],
      rules: {
        enp_code_type: [{ required: true, validator: validateBusType }],
        enp_title: [
          {
            required: true,
            message: "请输入企业名称",
            trigger: "blur",
          },
        ],
        enp_user: [
          {
            required: true,
            message: "请输入法定代表人",
            trigger: "blur",
          },
        ],
        enp_time_type: [
          { required: true, validator: enpLose, trigger: "change" },
        ],
        enp_img: [{ required: true, message: "请上传营业执照照片" }],
        user_type: [
          {
            required: true,
            message: "请选择证件类型",
            trigger: "change",
          },
        ],
        user_number: [
          {
            required: true,
            validator: validateIdentity1,
            trigger: "blur",
          },
        ],
        user_front_img: [{ required: true, message: "请上传证件正面" }],
        user_verso_img: [{ required: true, message: "请上传证件背面" }],
        bank_user: [
          { required: true, message: "请输入开户名", trigger: "blur" },
        ],
        bank_name: [
          { required: true, message: "请输入开户行", trigger: "blur" },
        ],
        bank_num: [{ required: true, validator: bankNnum, trigger: "blur" }],
      },
      rules1: {
        name: [
          {
            required: true,
            message: "请输入门店名称",
            trigger: "blur",
          },
          {
            min: 1,
            max: 20,
            message: "请输入1到20个字之间",
            trigger: "blur",
          },
        ],
        cate_id: [
          {
            required: true,
            message: "请选择门店分类",
            trigger: "change",
          },
        ],
        main_business: [
          {
            required: true,
            message: "请选择主营业务",
            trigger: "change",
          },
        ],
        address: [{ required: true, validator: provinceId, trigger: "blur" }],
        business_phone_one: [
          { required: true, validator: validateNum, trigger: "blur" },
        ],
        // business_phone_two: [
        //   { required: true, validator: validateNum, trigger: "blur" }
        // ],
        business_time: [{ required: true, message: "请选择营业时间" }],
        desc: [
          {
            min: 10,
            max: 200,
            message: "请输入10到200个字符之间",
            trigger: "blur",
          },
        ],
      },
      rules2: {
        shop_logo: [{ required: true, validator: shopLogo }],
        image_ids: [{ required: true, validator: imageIds }],
      },
      rules4: {
        legal_person: [
          { required: true, message: "请输入姓名", trigger: "blur" },
        ],
        phone: [{ required: true, validator: phoneReg, trigger: "blur" }],
        identity_type: [{ required: true, message: "请选择证件类型" }],
        identity: [
          {
            required: true,
            validator: validateIdentity2,
            trigger: "blur",
          },
        ],
        identity_img: [{ required: true, message: "请上传证件正面" }],
        identity_back_img: [{ required: true, message: "请上传证件背面" }],
        goods_address: [
          {
            required: true,
            message: "请输入收货地址",
            trigger: "blur",
          },
          {
            min: 1,
            max: 30,
            message: "最多30个字符",
            trigger: "blur",
          },
        ],
        // company_name: [{ required: true, message: "请输入签约分公司", trigger: "blur" }],
        level: [
          {
            required: true,
            message: "请选择签约身份",
            trigger: "change",
          },
        ],
        daily_address: [
          {
            required: true,
            message: "请选择常住地址",
            trigger: "change",
          },
        ],
      },
      isShow: false, // 地图显示
      banknum: true, // 银行信息验证
    };
  },

  watch: {
    enp_type(val) {
      if (val == 2) {
        this.flag = true;
      } else {
        this.flag = false;
      }
    },

    flag(e) {
      if (e) {
        this.$nextTick(() => {
          this.$refs.uploadImg1.getLength(this.fileList1);
          this.$refs.uploadImg2.getLength(this.fileList2);
          this.$refs.uploadImg3.getLength(this.fileList3);
          this.$refs.uploadImg4.getLength(this.fileList4);
          this.$refs.uploadImg5.getLength(this.fileList5);
        });
      } else {
        this.$nextTick(() => {
          this.$refs.uploadImg1.getLength(this.fileList1);
          this.$refs.uploadImg2.getLength(this.fileList2);
          this.$refs.uploadImg3.getLength(this.fileList3);
          this.$refs.uploadImg4.getLength(this.fileList4);
          this.$refs.uploadImg5.getLength(this.fileList5);
        });
      }
    },

    options(val, oldval) {
      if (val) {
        let province = {};
        let city = {};
        let district = {};
        if (this.selectedOptions.length > 0) {
          province = this.options.find((item) => {
            return item.value == this.selectedOptions[0];
          });
          city = province.children.find((item) => {
            return item.value == this.selectedOptions[1];
          });
          district = city.children.find((item) => {
            return item.value == this.selectedOptions[2];
          });
          this.address = province.label + city.label + district.label;
        }
      }
    },
  },
  created() {
    // this.getStatus();
    this.getArea();
    this.getShopCate();
    this.shuangdjShop();
    this.getChar();
    this.getPic();
  },
  mounted() {
    this.getMsg();
    this.getCharData();
  },
  inject: ["reload"],
  methods: {
    // // 审核按钮
    // clickitem(e) {
    //     e === this.offensive ? (this.offensive = "") : (this.offensive = e);
    //     if (this.offensive) {
    //         this.btnDisable = false;
    //     }
    // },
    // 省市区数据改变
    pcaList(value) {
      let province = {};
      let city = {};
      let district = {};
      if (value.length > 0) {
        province = this.options.find((item) => {
          return item.value == value[0];
        });
        city = province.children.find((item) => {
          return item.value == value[1];
        });
        district = city.children.find((item) => {
          return item.value == value[2];
        });
        this.address = province.label + city.label + district.label;
      }
      this.getLngLat();
      let e = this.selectedOptions;
      e = value;
      this.form1.province = e[0];
      this.form1.city = e[1];
      this.form1.district = e[2];
    },
    // 主营业务改变
    changeTabe(value) {
      this.form1.main_business_id = value[1];
    },
    // 获取信息
    getMsg() {
      let id = this.$route.query.id;
      getShopData({ shop_id: id })
        .then((res) => {
          // console.log(res);
          if (res.data.code == 200) {
            const ImgUrl = "http://mmkappnew.oss-cn-beijing.aliyuncs.com/";
            const data = res.data.data;
            // 经营许可
            this.check_msg = data.check_msg;
            // this.update_status = data.update_status;
            // this.check_status = data.check_status;
            // localStorage.setItem(
            //     "update_status",
            //     this.update_status
            // );
            // localStorage.setItem(
            //     "check_status",
            //     this.check_status
            // );
            this.enp_type = data.enp_type ? data.enp_type : 1;
            this.form.bank_name = data.bank_name;
            this.form.bank_num = data.bank_num;
            this.form.bank_user = data.bank_user;
            this.form.enp_user = data.enp_user;
            this.form.enp_code_type = data.enp_code_type;
            this.form.enp_code = data.enp_code;
            this.form.enp_title = data.enp_title;
            this.form.user_type = data.user_type;
            this.form.user_number = data.user_number;

            this.form.enp_time_type = data.enp_time_type;
            this.form.enp_lose_time = data.enp_lose_time;

            // 图片
            if (data.enp_img[0]) {
              const enp_img = data.enp_img.map((item) => {
                return { url: ImgUrl + item };
              });
              this.fileList1 = enp_img;
            }
            if (data.user_front_img) {
              this.fileList2 = [{ url: ImgUrl + data.user_front_img }];
            }
            if (data.user_verso_img) {
              this.fileList3 = [{ url: ImgUrl + data.user_verso_img }];
            }
            this.form.user_verso_img = data.user_verso_img;
            this.form.user_front_img = data.user_front_img;
            this.form.enp_img = data.enp_img;
            this.$nextTick(() => {
              this.$refs.uploadImg1.getLength(this.fileList1);
              this.$refs.uploadImg2.getLength(this.fileList2);
              this.$refs.uploadImg3.getLength(this.fileList3);
            });

            // 个人信息
            this.form4.company_name = data.company_name;
            this.form4.level = data.level;
            this.form4.phone = data.phone;
            this.form4.legal_person = data.legal_person;
            this.form4.email = data.email;
            this.form4.recomend_user = data.recomend_user;
            this.form4.recomend_phone = data.recomend_phone;
            this.form4.daily_address = data.daily_address;
            this.form4.goods_address = data.goods_address;
            this.form4.identity_type = data.identity_type;
            if (data.identity_img) {
              this.fileList4 = [{ url: ImgUrl + data.identity_img }];
            }
            if (data.identity_back_img) {
              this.fileList5 = [{ url: ImgUrl + data.identity_back_img }];
            }
            this.form4.identity_img = data.identity_img;
            this.form4.identity_back_img = data.identity_back_img;
            this.form4.identity = data.identity;
            this.$nextTick(() => {
              this.$refs.uploadImg4.getLength(this.fileList4);
              this.$refs.uploadImg5.getLength(this.fileList5);
            });

            // 门店信息
            this.form1.name = data.name;
            this.form1.desc = data.desc;
            this.form1.main_business_id = data.main_business_id;
            this.form1.main_business = [
              Number(String(data.main_business_id).split("")[0]),
              data.main_business_id,
            ];
            this.form1.business_time =
              data.business_time.length > 1
                ? data.business_time
                : ["00:00", "23:59"];
            this.form1.business_phone_one = data.business_phone_one
              .split("-")
              .join("");
            this.form1.business_phone_two = data.business_phone_two
              .split("-")
              .join("");
            this.form1.cate_id = data.cate;
            // this.form1.business_time = [data.business_time];
            this.form1.province = data.province;
            this.form1.city = data.city;
            this.form1.district = data.district;
            this.form1.address = data.address;
            if (data.lng) {
              this.getMap({ lng: data.lng, lat: data.lat });
            }
            this.form1.lng = data.lng;
            this.form1.lat = data.lat;
            if (data.province) {
              this.selectedOptions = [data.province, data.city, data.district];
            }
            this.$nextTick(() => {
              this.IdCard();
              this.IdCard1();
            });
          } else {
            this.$message({
              message: res.data.msg,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          this.errorStatus(err.msg);
        });
    },
    // 提交审核
    submitCheck(a, b, c) {
      this.form2.shop_logo = this.$refs.uploadImg6.submitUpload()[0];
      this.form2.image_ids = this.$refs.uploadImg7.submitUpload();
      // this.form2.works_ids = this.$refs.uploadImg8.submitUpload();
      this.$refs[a].validate((valid) => {
        if (valid) {
          this.$refs[b].validate((valid) => {
            if (valid) {
              this.$refs[c].validate((valid) => {
                if (valid) {
                  const data = {
                    shop_id: this.$route.query.id,
                    name: this.form1.name,
                    cate_id: this.form1.cate_id,
                    address: this.form1.address,
                    province: this.form1.province,
                    city: this.form1.city,
                    district: this.form1.district,
                    lng: this.form1.lng,
                    lat: this.form1.lat,
                    business_phone_one: this.form1.business_phone_one,
                    business_phone_two: this.form1.business_phone_two,
                    business_time: this.form1.business_time,
                    desc: this.form1.desc,
                    main_business_id: this.form1.main_business[1],
                    shop_logo: this.form2.shop_logo,
                    image_ids: this.form2.image_ids,
                    serviceData: [
                      ...this.form3.envir,
                      ...this.form3.char,
                      ...this.form3.per,
                      // ...this.form3.mer
                    ],
                    icon: this.form3.mer,
                  };
                  editShop(data)
                    .then((res) => {
                      if (res.data.code == 200) {
                        this.succStatus("编辑成功");
                        this.$router.push("/shopCheckList");
                        this.reload();
                      } else {
                        this.$message({
                          message: res.data.msg,
                          type: "warning",
                        });
                      }
                    })
                    .catch((err) => {
                      this.errorStatus(err.msg);
                    });
                } else {
                  this.$message({
                    message: "有必填项没填，不能提交咯",
                    type: "warning",
                  });
                  return false;
                }
              });
            } else {
              this.$message({
                message: "门店环境有必填项没填，不能提交咯",
                type: "warning",
              });
              return false;
            }
          });
        } else {
          this.$message({
            message: "门店信息有必填项没填，不能提交咯",
            type: "warning",
          });
          return false;
        }
      });
    },
    // 获取经纬度
    getLngLat() {
      if (this.address && this.form1.address) {
        const datas = {
          address: this.address + this.form1.address,
        };
        getLat(datas)
          .then((res) => {
            // if (res.status==200) {
            // console.log(res)
            this.form1.lng = res.data.lng;
            this.form1.lat = res.data.lat;
            this.getMap(res.data);
            // }
          })
          .catch((err) => {
            // this.errorStatus(err.msg);
          });
      }
    },
    // 地图获取显示
    getMap(e) {
      // console.log(e)
      var map = new AMap.Map("container", {
        resizeEnable: true, // 是否监控地图容器尺寸变化
        zoom: 15, // 初始化地图层级
        center: [e.lng, e.lat], // 初始化地图中心点
      });
      var marker = new AMap.Marker({
        position: [e.lng, e.lat], // 位置
      });
      // AMap.plugin(['AMap.ToolBar',''],function () {
      //     map.addControl(new AMap.ToolBar())
      //     })
      this.isShow = true;
      map.add(marker);
    },
    // 省市区
    getArea() {
      getPro().then((res) => {
        const newArr = [];
        // console.log(res)
        res.data.forEach((item1, index) => {
          newArr.push({
            value: item1.value,
            label: item1.label,
          });
          if (item1.children != null) {
            newArr[index]["children"] = [];
            item1.children.forEach((item2) => {
              newArr[index]["children"].push({
                value: item2.value,
                label: item2.label,
              });
            });
          }
        });
        this.options = res.data;
        this.twoOptions = newArr;

        if (this.selectedOptions) {
          this.pcaList(this.selectedOptions);
        }
      });
    },

    // 获取门店分类
    getShopCate() {
      getCate().then((res) => {
        const newArr = [];
        res.data.forEach((item1, index) => {
          newArr.push({
            value: item1.value,
            label: item1.label,
          });
        });
        this.shopCate = newArr;
      });
    },
    // 身份证号验证
    IdCard() {
      if (this.form.user_type == 4) {
        this.enpMsg = false;
        this.$refs.form.validateField("user_number");
        if (this.form.enp_user && this.form.user_number) {
          axios
            .post("http://basicts.yuepinyuemei.com//api/user/idcard/auth", {
              realname: this.form.enp_user,
              idcard: this.form.user_number,
            })
            .then((res) => {
              // console.log(res)
              if (res.data.code == 200) {
                this.enpMsg = true;
                this.$refs.form.validateField("user_number");
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "warning",
                });
              }
            })
            .catch((err) => {
              // this.errorStatus(err.msg);
            });
        }
      }
    },
    IdCard1() {
      if (this.form4.identity_type == 4) {
        this.enpMsg1 = false;
        if (this.form4.legal_person && this.form4.identity) {
          axios
            .post("http://basicts.yuepinyuemei.com//api/user/idcard/auth", {
              realname: this.form4.legal_person,
              idcard: this.form4.identity,
            })
            .then((res) => {
              // console.log(res)
              if (res.data.code == 200) {
                this.enpMsg1 = true;
                this.$refs.form4.validateField("identity");
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "warning",
                });
              }
            });
        }
      }
    },

    // 银行信息验证
    bankCard() {
      if (this.form.bank_user && this.form.bank_num) {
        axios
          .post(`http://basicts.yuepinyuemei.com/api/bank/card/info`, {
            realname: String(this.form.bank_user),
            card_num: String(this.form.bank_num),
          })
          .then((res) => {
            // console.log(res)
            if (res.data.code == 200) {
              this.banknum = true;
              this.$refs.form.validateField("bank_num");
            } else {
              this.banknum = false;
              this.$refs.form.validateField("bank_num");
            }
          })
          .catch((err) => {
            // this.errorStatus(err);
          });
      }
      // else{
      //       this.$message({
      //         message: res.data.msg,
      //         type: 'warning'
      //       })
      // }
    },
    // 获取爽到家主营业务
    shuangdjShop() {
      axios
        .post(`http://basicts.yuepinyuemei.com/mmk/shuangdj/shop/business`)
        .then((res) => {
          // console.log(res)
          if (res.data.code == 0) {
            const newArr = [];
            // console.log(res)
            res.data.data.dataList.forEach((item1, index) => {
              newArr.push({
                value: item1.mainBusinessId,
                label: item1.mainBusinessName,
              });
              if (item1.mainBusinessList != null) {
                newArr[index]["children"] = [];
                item1.mainBusinessList.forEach((item2) => {
                  newArr[index]["children"].push({
                    value: item2.mainBusinessId,
                    label: item2.mainBusinessName,
                  });
                });
                this.businessCate = newArr;
              }
            });
          } else {
          }
        })
        .catch((err) => {
          // this.errorStatus(err);
        });
    },
    // 获取特色服务
    getChar() {
      getCharSer().then((res) => {
        if (res.data.data) {
          const arr = [];
          const arr1 = [];
          const arr2 = [];
          // const arr3 = [];
          // console.log("res.data", res.data.icon);
          res.data.data.forEach((item) => {
            if (item.type == 1) {
              arr.push(item);
            }
            if (item.type == 2) {
              arr1.push(item);
            }
            if (item.type == 3) {
              arr2.push(item);
            }
            // if (item.type == 4) {
            //     arr3.push(item);
            // }
            this.cities = arr;
            this.servers = arr1;
            this.personalies = arr2;
            // this.MerchantList = arr3;
          });
          this.MerchantList = res.data.icon;
          // console.log("this.MerchantList", this.MerchantList);
        } else {
          this.$message({
            message: res.data.msg,
            type: "warning",
          });
        }
      });
    },
    getCharData() {
      let id = this.$route.query.id;

      getChar({ shop_id: id }).then((res) => {
        if (res.data.code == 200 && res.data.data) {
          // console.log("res.data",res.data.icon)

          const arr = [];
          const arr1 = [];
          const arr2 = [];
          // const arr3 = [];
          res.data.data.forEach((item) => {
            if (item.type == 1) {
              arr.push(item.id);
            }
            if (item.type == 2) {
              arr1.push(item.id);
            }
            if (item.type == 3) {
              arr2.push(item.id);
            }
            // if (item.type == 4) {
            //     arr3.push(item.id);
            // }
            this.form3.envir = arr;
            this.form3.char = arr1;
            this.form3.per = arr2;
          });

          if (res.data.icon) {
            res.data.icon.forEach((item) => {
              if (item * 1 > 0) {
                this.form3.mer.push(item * 1);
              }
            });
          }
          // this.form3.mer.forEach((item, index) => {
          //     this.form3.mer[index] = parseInt(this.form3.mer[index]);
          // });
          // console.log("this.form3.mer", this.form3.mer);
        }
      });
    },
    //获取门店环境   图片回显
    getPic() {
      let id = Number(this.$route.query.id);
      picData({ shop_id: id }).then((res) => {
        // console.log(res)
        const ImgUrl = "http://mmkappnew.oss-cn-beijing.aliyuncs.com/";
        if (res.data.code == 200 && res.data.data.shop_logo) {
          let life_shop_work = res.data.data.life_shop_work.map((item) => {
            return { url: ImgUrl + item };
          });
          let life_shop_images = res.data.data.life_shop_images.map((item) => {
            return { url: ImgUrl + item };
          });

          this.fileList6 = [{ url: ImgUrl + res.data.data.shop_logo }];
          this.fileList7 = life_shop_images;
          // this.fileList8 = life_shop_work;
          this.$refs.uploadImg6.getLength(this.fileList6);
          this.$refs.uploadImg7.getLength(this.fileList7);
          // this.$refs.uploadImg8.getLength(this.fileList8);
        }
      });
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status,
      });
    },
    // 成功状态弹窗
    succStatus(txt, status) {
      this.eleMsg(txt, "success");
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px !important;
}
#container {
  width: 350px;
  height: 350px;
  margin: 0 0 30px 150px;
  touch-action: none;
}
.text {
  color: #444;
  font-size: 12px;
  font-weight: 400;
}
.el-range-editor--medium.el-input__inner {
  width: 350px;
}
.title {
  margin-left: 150px;
  margin-bottom: 20px;
}
.titles {
  margin-bottom: 20px;
}
.msgText {
  width: 370px;
  color: #444;
  font-weight: 400;
}
/* 服务审核中信息样式 */
.serviceInfo {
  display: block;
  padding: 20px;
  font-size: 30px;
  color: orange;
}
.dialogtext {
  text-align: center;
  line-height: 36px;
  height: 36px;
}
.el-checkbox {
  margin-left: 30px;
  width: 150px;
}
</style>
